<template>
  <div class="dashboard-container">
    <div class="dashboard-text" style="min-height: 695px;">
      <el-row style="margin-bottom: 15px;line-height: 30px;">
        <el-col :span="12">
          <span style="font-size: 18px;font-weight: bold;">菜单管理</span>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" style="width: 13%;" @click="add()">添加</el-button>
        </el-col>
      </el-row>
      <!-- 需要封装开始 -->
      <el-dialog title="添加菜单" class="tjcd" :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="菜单名称：" label-width="120px" prop="Menuname">
            <el-input v-model="ruleForm.Menuname" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="菜单类型：" label-width="120px" prop="Menuname">
            <el-radio-group v-model="ruleForm.type">
              <el-radio-button label="目录" />
              <el-radio-button label="菜单" />
              <el-radio-button label="按钮" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标识符：" label-width="120px" prop="Menuname">
            <el-input v-model="ruleForm.icon" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="路由跳转链接：" prop="Routejumplink">
            <el-input v-model="ruleForm.Routejumplink" placeholder="请输入路由跳转链接" />
          </el-form-item>
          <el-form-item label="排序：" prop="Roworder">
            <el-input-number v-model="ruleForm.Roworder" :min="1" :max="10" label="请输入排序" />
          </el-form-item>
          <el-form-item label="是否显示：" prop="delivery" style="margin-bottom: 0;">
            <el-switch v-model="ruleForm.delivery" />
            <div style="float: right;">
              <el-button type="primary" @click="submitForm('ruleForm', type)">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 添加子菜单 -->
      <el-dialog title="添加子菜单" class="tjcd" :visible.sync="dialogFormVisibleChild">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="菜单名称：" label-width="120px" prop="Menuname">
            <el-input v-model="ruleForm.Menuname" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="标识符：" label-width="120px" prop="parentName">
            <el-input v-model="ruleForm.icon" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="父级菜单：" label-width="120px" prop="parentName">
            <el-input v-model="ruleForm.parentName" :disabled="true" />
          </el-form-item>
          <el-form-item label="路由跳转链接：" prop="Routejumplink">
            <el-input v-model="ruleForm.Routejumplink" placeholder="请输入路由跳转链接" />
          </el-form-item>
          <el-form-item label="排序：" prop="Roworder">
            <el-input-number v-model="ruleForm.Roworder" :min="1" :max="10" label="请输入排序" />
          </el-form-item>
          <el-form-item label="是否显示：" prop="delivery" style="margin-bottom: 0;">
            <el-switch v-model="ruleForm.delivery" />
            <div style="float: right;">
              <el-button type="primary" @click="submitFormChild('ruleForm', type)">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 查看下级 -->
      <el-dialog class="tjcd" :visible.sync="dialogSubordinate">
        <el-table :data="gridData">
          <el-table-column property="name" label="菜单名称" />
          <el-table-column property="url" label="菜单路径" />
          <el-table-column property="orderNum" label="排序" width="100" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 需要封装结束 -->
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="menuId" align="center" label="编号" />
            <el-table-column prop="name" align="center" label="菜单名称" />
            <el-table-column prop="icon" align="center" label="标识符" />
            <el-table-column prop="parentId" align="center" label="所属父级id" />
            <!-- <el-table-column prop="name" align="center" label="模块名称" /> -->
            <el-table-column align="center" label="是否显示">
              <template slot-scope="scope">
                <el-switch v-model="scope.open" />
              </template>
            </el-table-column>
            <!-- <el-table-column prop="name" align="center" label="控制器名称" /> -->
            <!-- <el-table-column prop="name" align="center" label="方法名称" /> -->
            <el-table-column prop="url" align="center" label="路由跳转链接" />
            <el-table-column prop="icon" align="center" label="前端图标" />
            <el-table-column prop="orderNum" align="center" label="排序" />
            <el-table-column align="center" label="设置">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="lowerLevel(scope.row)">查看下级</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="addChild(scope.row)">添加子菜单</el-button>
                <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--      <el-row style="margin: 25px 0 15px;line-height: 26px;text-align: right;">
        <el-col :span="24">
          <div class="block">
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  addMenu,
  menuList,
  updateMenu,
  deleteMenu
} from '../../api/user.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      type: 'add',
      list: [],
      gridData: [],
      dialogSubordinate: false,
      dialogFormVisibleChild: false,
      ruleForm: {
        parentId: '',
        parentName: '',
        icon: '',
        Menuname: '',
        identifier: '',
        Modulename: '',
        Controllername: '',
        Methodname: '',
        Routejumplink: '',
        region: '',
        Roworder: '',
        delivery: false
      },
      rules: {
        Menuname: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 5,
          message: '长度在 3 到 5 个字符',
          trigger: 'blur'
        }
        ],
        identifier: [{
          required: true,
          message: '请输入标识符',
          trigger: 'blur'
        }],
        Modulename: [{
          required: true,
          message: '请输入模块名称',
          trigger: 'blur'
        }],
        Controllername: [{
          required: true,
          message: '请输入控制器名称',
          trigger: 'blur'
        }],
        Methodname: [{
          required: true,
          message: '请输入方法名称',
          trigger: 'blur'
        }],
        Routejumplink: [{
          required: true,
          message: '请输入路由跳转链接',
          trigger: 'blur'
        }]
        // region: [
        //   { required: true, message: '请选择所属父级id', trigger: 'change' }
        // ]
      },
      dialogFormVisible: false,
      value1: true,
      currentPage4: 1,
      tableData: [],
      input: '',
      options: [],
      value: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查看下级url
    lowerLevel(val) {
      this.gridData = []
      for (const i in this.list) {
        if (this.list[i].parentId === val.menuId) {
          this.gridData.push(this.list[i])
        }
      }
      this.dialogSubordinate = true
    },
    submitForm(formName, type) {
      var that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (type === 'add') {
            that.addMenu()
          } else {
            that.updateMenu()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.ruleForm = {
        icon: '',
        Menuname: '',
        identifier: '',
        Modulename: '',
        Controllername: '',
        Methodname: '',
        Routejumplink: '',
        region: '',
        Roworder: '',
        delivery: false
      }
      this.tableData = []
      menuList().then(response => {
        this.dialogFormVisible = false
        this.dialogFormVisibleChild = false
        this.dialogSubordinate = false
        this.list = response
        for (const i in response) {
          if (response[i].parentId === 1) {
            this.tableData.push(response[i])
          }
        }
      }).catch(() => {})
    },
    submitFormChild() {
      var param = {
        icon: this.ruleForm.icon,
        name: this.ruleForm.Menuname,
        open: this.ruleForm.delivery,
        orderNum: this.ruleForm.Roworder,
        parentId: this.ruleForm.parentId,
        parentName: this.ruleForm.parentName,
        type: 2,
        url: this.ruleForm.Routejumplink
      }
      addMenu(param).then(response => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          message: '添加失败',
          type: 'success'
        })
      })
    },
    // 添加子菜单
    addChild(row) {
      console.log(row)
      this.ruleForm.parentName = row.name
      this.ruleForm.parentId = row.menuId
      this.dialogFormVisibleChild = true
    },
    // 添加打开编辑
    add() {
      this.type = 'add'
      this.dialogFormVisible = true
      this.ruleForm = {
        icon: '',
        Menuname: '',
        identifier: '',
        Modulename: '',
        Controllername: '',
        Methodname: '',
        Routejumplink: '',
        region: '',
        Roworder: '',
        delivery: false
      }
    },
    // 打开编辑
    edit(row) {
      this.type = 'edit'
      var data = Object.assign(row, {})
      this.ruleForm.icon = data.icon
      this.ruleForm.Menuname = data.name
      this.ruleForm.delivery = data.open
      this.ruleForm.Roworder = data.orderNum
      this.ruleForm.Routejumplink = data.url
      this.dialogFormVisible = true
    },
    // 修改菜单
    updateMenu() {
      var param = {
        icon: this.ruleForm.icon,
        name: this.ruleForm.Menuname,
        open: this.ruleForm.delivery,
        orderNum: this.ruleForm.Roworder,
        parentId: '',
        parentName: '',
        type: this.ruleForm.type === '目录' ? '0' : this.ruleForm.type === '菜单' ? '1' : '0',
        url: this.ruleForm.Routejumplink
      }
      updateMenu(param).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          message: '修改失败',
          type: 'success'
        })
      })
    },
    // 添加菜单
    addMenu() {
      var param = {
        icon: this.ruleForm.icon,
        name: this.ruleForm.Menuname,
        open: this.ruleForm.delivery,
        orderNum: this.ruleForm.Roworder,
        parentId: '1',
        parentName: '',
        type: this.ruleForm.type === '目录' ? '0' : this.ruleForm.type === '菜单' ? '1' : '0',
        url: this.ruleForm.Routejumplink
      }
      addMenu(param).then(response => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.getList()
      }).catch(() => {
        this.$message({
          message: '添加失败',
          type: 'success'
        })
      })
    },
    handleClick(row) {
      deleteMenu(row.menuId).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getList()
      }).catch(() => {})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style>
  .tjcd /deep/ .el-dialog__header {
    line-height: 0 !important;
  }

  .tjcd /deep/ .el-dialog__body {
    padding-top: 15px !important;
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 15px;
    }

    &-text {
      padding: 15px;
      font-size: 30px;
      line-height: 46px;
      background-color: #fff;
    }
  }
</style>
s
